<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初识VUE</title>
    <!--    引入VUE-->
    <script type="text/javascript" src="../../../public/vue.js"></script>
</head>
<body>
<!-- 初识vue
    1、想让vue工作，必须创建一个vue实例，并且要传入配置对象
    2、root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
    3、root容器里的代码被称为Vue模板
    4、vue和实例是一一对应的
    5、实际开发只有一个vue实例，配合组件一起使用
    6、{{xxx}}中的xxx要写js语法，切xxx可以自动读取到data中所有的数据
    7、一旦data中的数据发生变化，容器中的数据会一起变化
    双花括号中的值只能是js表达式
    注意区分js表达式和js代码
    1、一个表达式可以生成一个值，可以放在任何地方
        表达式：
            1) a
            2) a+b
            3) demo(1)
            4) 1==1
        JS代码
            1) if(){}
            2) for(){}
    -->
<!--准备一个容器-->
<div id="yml">
    <!--    插值语法 {{}}} -->
    <h1 >Hello,{{ name }}尹明丽</h1>
    <button style="width: 100px"  >按钮</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止vue 提示，忽略vue的版本警告

    // 创建VUE 实例
    const x = new Vue({
        // 与示例之间建立关系，EL 用于指定当前VUE实例为那个容器服务，通常为css选择器
        el: '#yml',
        // element: 'yml'
        // el:document.getElementById("yml")

        // 将容器中变化的数据交给vue实例进行保管
        data: { // data中用于存储数据，数据供el所制定的容器使用
            name: '可爱的',
        }
    });
</script>
</body>

</html>